<template>
      <div class="box_b" >
          <span class="dis_" @click="shutDown">x</span>
         <div class="top">
             <img src="/img/common/gonggaolan.png" alt=""><h3>公告栏：{{content_.title}}</h3>
         </div>

      <div class="c_box">
          <p class="content" v-html="content_.content" @click="detail"></p>
      </div>
          <div class="bottom">
              <span class="admin" >发件人：{{sendName}}</span>
              <label >
                  <input type="checkbox" :checked="bulletinBoard.checked_" @click="check_">已读
              </label>
          </div>
      </div>
</template>

<script>
import api from "@/api";

export default {
    name: "BulletinBoard",
    props:['board'],
    data(){
        return{
            bulletinBoard:{
                checked_:0,
                title:"",
            },
            content_:{
                id:"",
                title:"",
                content:"",
                publisher:"",
            },
            sendName:"",
        }
    },
    mounted() {

    },
    watch:{
        'board'(newValue,oldValue){
            if(newValue !== null){
                this.content_ = newValue
                api.getByID(newValue.publisher).then((res)=>{
                    if(res.data.code===200){
                        this.sendName = res.data.data.username
                    }
                })
            }
        },
    },
    methods:{

        detail(){
            this.$router.push("/changelog");
        },
        check_(){
               if(this.bulletinBoard.checked_ === 0){
                   this.bulletinBoard.checked_ = 1;
               }else {
                   this.bulletinBoard.checked_ = 0;
               }
            this.bulletinBoard.title = this.content_.id
            window.localStorage.setItem("BulletinBoard",JSON.stringify({id:this.content_.id,checked_:1}));
                 },
        shutDown(){
            this.$emit("shutDown");
        }
    }
}
</script>

<style scoped>
.admin{
    color: #fa760a;
    font-weight: bold;
    cursor: pointer;
}
.content:hover{
    opacity: .9;
    text-decoration: underline;
    cursor: pointer;
}
.dis_{
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    background: rgba(252, 129, 7, 0.7);
    text-align: center;
    line-height: 18px;
    color: white;
    z-index: 100;
    border-radius: 50%;
}
.dis_:hover{
    cursor: pointer;
    opacity: .8;
}
.box_b{
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 300px;
    border: 1px solid #f88d35;
    background: rgba(255, 255, 255, 0.9);
    z-index: 99;
    animation: box_ 0.5s ease-in-out 0s 1 forwards;
}
@keyframes box_ {
    0%{
        transform:translateX(-50%) scaleY(0);
    }100%{
        transform:translateX(-50%) scaleY(100%);
         }
}
h3{
    text-align: center;
    color: #fa760a;
    font-weight: bold;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.top{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px !important;
}
.top img{
    width: 35px;
}
label{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
label input{
    margin-top: 3px;
}
.content{
    text-indent: 0.5rem;
    margin: 5px 10px;
    height: 220px;
    letter-spacing: 2px;
    word-break: break-all;
    color: white;
    background: rgba(246, 174, 114, 0.7);
    overflow:hidden;/*超出隐藏*/
    text-overflow:ellipsis;/*文本溢出时显示省略标记*/
    display:-webkit-box;/*设置弹性盒模型*/
    -webkit-line-clamp:11;
    -webkit-box-orient:vertical;/*子代元素垂直显示*/
}
.bottom{
    position: absolute;
    bottom: 3%;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 0 10px;
    color: #8f8c8c;
}
.c_box{
    padding: 5px;
}
@media (min-width: 0) and (max-width: 800px) {
    .box_b{
        width: 400px;
    }
}
</style>